<template>
  <div>
    <h2 class="title">官方榜</h2>
    <div class="official" v-for="(official, key) in officialList" :key="key">
      <div class="left_img" @dblclick="toSonglistPage(official.id)">
        <el-image
          style="width: 170px; height: 170px"
          :src="official.coverImgUrl"
          fit="fill"
        ></el-image>
        <div class="update">{{ official.updateTime | songTimeFilter }}更新</div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
      </div>

      <div class="right_list">
        <ul v-double-click>
          <li
            v-for="(music, key2) in official.musiclist"
            :key="key2"
            @dblclick="playSong(music, official.musiclist)"
          >
            <div>
              <span class="index">{{ music.index + 1 }}</span>
              <span>{{ music.name }}</span>
            </div>
            <div class="artistname">{{ music.artistname }}</div>
          </li>
        </ul>
        <div class="check" @click="toSonglistPage(official.id)">
          查看全部 <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>

    <h2 class="title">全球榜</h2>
    <div class="global">
      <div
        v-for="item in globalList"
        :key="item.id"
        @dblclick="toSonglistPage(item.id)"
      >
        <el-image
          style="width: 160px; height: 160px"
          :src="item.coverImgUrl"
          fit="fill"
        ></el-image>
        <div class="playCount">
          <i class="el-icon-caret-right"></i>
          {{ item.playCount }}
        </div>
        <div class="play">
          <i class="el-icon-caret-right"></i>
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      // 官方榜
      officialList: [],
      // 全球榜
      globalList: [],
      // 榜单音乐前5
      topfive: [],
    }
  },
  created() {
    this.keepRouterHighlight()
    this.allLeaderboard()
  },
  filters: {
    // 歌曲时间过滤器
    songTimeFilter: function (val) {
      const dt = new Date(val)

      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      return `${m}月${d}日`
    },
  },
  methods: {
    ...mapMutations([
      'changePath',
      'changeIsActive',
      'changeSonglistId',
      'changeMusicPlayInfo',
    ]),

    // 保持状态栏高亮
    keepRouterHighlight() {
      const active = '4'
      this.$emit('keepRouterHighlight', active)
    },
    // 查看所有榜单
    async allLeaderboard() {
      const { data: res } = await this.$http({
        url: `/toplist`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let officialTmepListDatas = []
      let globalTmepListDatas = []
      let index = 0

      res.list.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.name = item.name
        listObj.coverImgUrl = item.coverImgUrl

        if (index <= 3) {
          listObj.musiclist = []
          setTimeout(async () => {
            const musiclist = await this.fetchMusicInfo(listObj.id)
            listObj.musiclist = musiclist
          }, 200)

          listObj.updateTime = item.updateTime
          index++
          return officialTmepListDatas.push(listObj)
        }

        listObj.playCount = item.playCount
        index++
        return globalTmepListDatas.push(listObj)
      })

      this.officialList = officialTmepListDatas
      this.globalList = globalTmepListDatas
      // console.log(this.officialList)
    },
    // 提取榜单前5的音乐
    async fetchMusicInfo(songlistId) {
      const { data: res } = await this.$http({
        url: `/playlist/track/all?id=${songlistId}&limit=5`,
        withCredentials: true, //关键
      })
      // console.log(res)

      let tempListDatas = []
      let index = 0
      res.songs.map((item) => {
        let listObj = {}

        listObj.id = item.id
        listObj.time = item.dt
        listObj.name = item.name
        listObj.picUrl = item.al.picUrl

        let str = ''
        for (let i = 0; i < item.ar.length; i++) {
          str = str + item.ar[i].name
          if (i != item.ar.length - 1) {
            str = str + '/'
          }
        }
        listObj.artistname = str
        listObj.index = index
        index++
        return tempListDatas.push(listObj)
      })

      return tempListDatas
    },
    // 播放歌曲
    playSong(row, list) {
      let thePlaySongInfo = row
      let thePlaySongListInfo = list

      const info = {
        thePlaySongInfo,
        thePlaySongListInfo,
      }

      this.changeMusicPlayInfo(info)
    },
    // 传递 歌单数据，并跳转到歌单页面
    toSonglistPage(songlistId) {
      const info = {
        path: '/view/songlist',
        isActive: songlistId,
        songlistId: songlistId,
      }
      this.changePath(info.path)
      this.changeIsActive(info.isActive)
      this.changeSonglistId(info.songlistId)

      this.$emit('getSonglistId')
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  padding-left: 12px;
}

.official {
  display: flex;
  padding-left: 12px;
  padding-bottom: 12px;

  > .left_img {
    text-align: center;
    cursor: pointer;
    /deep/ .el-image__inner {
      border-radius: 8px;
    }
    > .update {
      position: relative;
      bottom: 66px;
      color: white;
      font-size: 13px;
    }
    > .play {
      position: relative;
      bottom: 120px;
      left: 68px;
      // color: white;
      font-size: 13px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.541);
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 34px;
        color: #ec4141;
        position: relative;
        left: 0px;
        top: 3px;
      }
    }
  }
  > .left_img:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
  > .right_list {
    ul {
      position: relative;
      top: -16px;
      li {
        list-style: none;
        display: flex;
        justify-content: space-between;
        width: 660px;
        padding: 6px 16px;
        .index {
          padding-right: 10px;
        }
        .artistname {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 240px;
          text-align: right;
        }
      }
      li:nth-child(odd) {
        background-color: #f3f1f1;
      }
      li:hover {
        background-color: #f8ab8d67;
      }
    }
    > .check {
      position: relative;
      top: -26px;
      left: 42px;
      width: 200px;
      cursor: pointer;
    }
  }
}

.global {
  display: flex;
  flex-wrap: wrap;
  padding-top: 12px;
  > div {
    padding: 0px 12px 20px 12px;
    position: relative;
    cursor: pointer;
    .el-image {
      border-radius: 6px;
    }
    > .playCount {
      position: absolute;
      right: 17px;
      top: 2px;
      color: white;
      font-size: 13.6px;
    }
    > .play {
      position: absolute;
      right: 22px;
      top: 118px;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      background-color: white;
      transition: 1s;
      opacity: 0;
      > .el-icon-caret-right {
        font-size: 28px;
        color: #ec4141;
        position: relative;
        left: 3px;
        top: 1px;
      }
    }
    > .name {
      width: 160px;
      font-size: 15px;
      padding-top: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      //将对象作为弹性伸缩盒子模型显示。
      display: -webkit-box;
      //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      -webkit-box-orient: vertical;
      //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      -webkit-line-clamp: 2;
    }
  }
  > div:hover {
    transition: 1s;
    > .play {
      opacity: 1;
    }
  }
}
</style>